import React, { useState, useRef } from 'react';
import { Popconfirm , Tooltip, Modal, message } from 'antd'
import AutoTable from '@/components/AutoTable'
import InitForm from '@/components/InitForm'
import { connect } from 'umi'
import { PlusOutlined } from '@ant-design/icons'

// type 类型有 table treeselect upload inputnumber datepicker daterange radio select textarea autoinput editor password input 

let defaultFields = {

    "phone": {
        "value": null,
        "type": "input",
        "title": "同行手机号",
        "name": [
            "phone"
        ],
        "required": true,
        "linked": true,
        col: {
            span: 24
        }
    }
}


function Directories(props) {

    const [vs, cvs] = useState(false),//表单显/隐
        [vis, cvis] = useState(false),
        [fields, cf] = useState(defaultFields),
        [iftype, ciftype] = useState({}),
        { location: { query },dispatch  } = props;

    let actionRef = useRef(), ChildRef = null;

    function reload() {
        actionRef?.current?.reload();
        ChildRef?.onRefresh();
    }
    const columns = [
        {
            "title": "同行手机号",
            "dataIndex": "phone",
            "key": "phone",
            render: (_, row) => <Tooltip title={row.phone}><a href={`tel:${row.phone}`} className="oneline">{row.phone}</a></Tooltip>
        },
        {
            title: '操作',
            valueType: 'option',
            width: 160,
            render: (text, record, _, action) => [
                <a onClick={() => {
                    ciftype({
                        val: "edit",
                        id: record.id,
                        title: "修改"
                    })
                    cf(() => {
                        for (let i in defaultFields) {
                            defaultFields[i].value = record[i];
                        }
                        return { ...defaultFields }
                    });
                    cvs(true);
                }}>
                    修改
                </a>,
                <Popconfirm
                    title="确认删除该号码？"
                    onConfirm={() => {
                        dispatch({
                            type: 'business/deletepeer',
                            payload: record.id
                        }).then(res => {
                            if (res.code == 0) {
                                message.success("操作成功");
                                reload();
                                cvs(false)
                            }
                        })
                    }}
                >
                    <a style={{ color: "red" }}>删除</a>
                </Popconfirm>
            ],
        }
    ]


    let extrarender = ([
        <Tooltip title="新增同行号码">
            <div className='action' onClick={() => {
                cvs(true);
                cf(fields => {
                    for (let i in fields) {
                        fields[i].value = null;
                    }
                    return { ...fields }
                });
                ciftype({
                    val: "add",
                    title: "新增同行号码"
                })
            }}>
                <PlusOutlined />
            </div>
        </Tooltip>
    ])


    let saveData = (values) => {
        let { dispatch } = props;
        values = {
            ...values,
        }
        if (iftype.val == "add") {
            dispatch({
                type: 'business/peer',
                payload: values
            }).then(res => {
                if (res.code == 0) {
                    message.success("操作成功");
                    reload();
                    cvs(false)
                }
            })
        } else if (iftype.val == "edit") {
            dispatch({
                type: 'business/editpeer',
                payload: { ...values, id: iftype.id }
            }).then(res => {
                if (res.code == 0) {
                    message.success("操作成功");
                    reload();
                    cvs(false)
                }
            })
        }
    }



    return (
        <div className="pgcontainer">
            <AutoTable
                pagetitle={props.route.name} //页面标题
                pageextra={extrarender} //页面操作 新增or批量删除
                columns={columns}
                actionRef={actionRef}
                onRef={node => ChildRef = node}
                path="/wbn-api/peer"
            //withCard={false} 
            //cardtitle = "name" //卡片标题
            //cardavatar = "img_url" //卡片头像
            >
            </AutoTable>
            <Modal
                maskClosable={false}
                title={iftype.title}
                open={vs}
                onCancel={() => cvs(false)}
                footer={false}
                destroyOnClose={true}
            >
                <InitForm
                    fields={fields}
                    submitData={(values) => {
                        saveData(values)
                    }}
                    onChange={(changedValues, allValues) => {
                        //联动操作
                    }}
                    submitting={
                        props.loading.effects['business/cashierretry'] || props.loading.effects['business/addpaymentorder'] || !vs
                    }
                    halfsave={false}
                >
                </InitForm>
            </Modal>


        </div>
    )
}

export default connect(({ business, loading }) => ({
    business,
    loading,
}))(Directories)